<template>
	<uni-nav-bar title="福利商城" left-icon="left" @clickLeft="navBack" :fixed="true" statusBar></uni-nav-bar>
	<view class="package">
		<input class="uni-input" confirm-type="search" placeholder="搜索商品" @confirm="confirm" v-model="search"
			@input="interrogate" />
	</view>
	<scroll-view scroll-y="true" enable-back-to-top @scrolltolower="loadMore" class="scroll-box"
		:style="{ height: pageHeight + 'px' }">
		<view class="package space-between" v-for="(item,index) in frinedList" :key="item.id"
			:style="{marginTop:index==0?'0px':'15rpx'}">
			<image :src="item.goods_image" mode="" style="width: 210rpx;height: 210rpx;border-radius: 5px;"></image>
			<view class="direction-start" style="width:66%;height: 210rpx;justify-content:space-between;">
				<view class="title">{{item.name}}</view>
				<view style="font-size: 26rpx">库存:{{item.stock}}件</view>
				<view style="font-size: 24rpx;">配送费：{{item.delivery_price}}</view>
				<view class="space-between" style="width:100%;">
					<view style="font-size: 26rpx;"><text
							style="color:#FF1313;font-size: 32rpx;margin-right: 10rpx;">{{item.score}}</text>蓝宝石
					</view>
					<view style="font-size: 24rpx;">零售价：{{item.price}}</view>
				</view>
			</view>
		</view>
		 <Popu v-if="frinedList.length<1" :pageHeight="pageHeight" text="暂无商品列表"></Popu>
	</scroll-view>
</template>

<script setup lang="ts">
	import { ref } from 'vue';
	import { navBack } from '@/utils/navigator';
	import Popu from '@c/earthPushing/common/popu.vue';
	import { toPublish } from '@mqtt';
	import { getGoodsList } from '@/gql/earthPushing/warehouse';
	import { showLoading, errorToast } from '@/utils/prompt';
	const search = ref('')
	const inquireAbout = ref(false)
	const pageHeight = ref();
	const frinedList = ref([])
	const lastPage = ref(1);
	const currentPage = ref(1);
	uni.getSystemInfo({
		success: function (res) {
			pageHeight.value = res.windowHeight - 110;
		},
	});
	/**
	  * 获取福利商城列表
	  */
	init()
	function init() {
		showLoading()
		const payload = {
			query: getGoodsList,
			variables: {
				page: currentPage.value,
				keywords: search.value
			},
		};
		toPublish(
			'ql/staff/getGoodsList',
			payload,
			(obj : any) => {
				uni.hideLoading();
				const { getGoodsList } = obj.data;
				frinedList.value = [...frinedList.value, ...getGoodsList.list];
				lastPage.value = getGoodsList.lastpage;
			}
		);
	}
	/**
	 * 加载更多
	 */
	function loadMore() {
		if (currentPage.value < lastPage.value) {
			currentPage.value++;
			init();
		}
	}
	/**
	 * 搜索内容
	 * @property {Object} evt 监听搜索框输入信息
	 */
	function interrogate(evt : any) {
		const { detail } = evt;
		if (!detail.value && inquireAbout) {
			console.log(detail.value)
			currentPage.value = 1;
			frinedList.value = [];
			init();
		}
	}
	/**
	 * 搜索
	 */
	function confirm() {
		if (search.value) {
			inquireAbout.value = search.value ? true : false;
			currentPage.value = 1;
			frinedList.value = [];
			init();
		} else {
			errorToast('请输入您要搜索的内容')
		}
	}
</script>

<style scoped lang="less">
	.title {
		width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
</style>